// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use './mixin/mixins.scss' as *;
@use './mixin/function.scss' as *;
@import 'common/index.scss';
@include bem_b(calendar-month) {
	@include bem_e(days) {
		@include flex;
		flex-wrap: wrap;

		&__day {
			@include flex;
			/* #ifndef APP-NVUE */
			// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
			width: calc(100% / 7);
			/* #endif */
			&__item {
				flex: 1;
				@include flex;
				align-items: center;
				justify-content: center;
				&__box {
					@include flex;
					align-items: center;
					justify-content: center;
					&-text {
						@include VueAndNvueStyleAttr('color', 'text-color', 'primary');
						@include VueAndNvueStyleAttr('font-size', 'calendar', 'font-size');
					}

					@include when(active) {
						@include VueAndNvueStyleAttr('background', 'calendar', 'active-background-color');
						@include VueAndNvueStyleAttr('width', 'calendar', 'active-size');
						@include VueAndNvueStyleAttr('height', 'calendar', 'active-size');
						@include VueAndNvueStyleAttr('border-radius', 'calendar', 'active-radius');
						.e-calendar-month__days__day__item__box-text {
							@include VueAndNvueStyleAttr('color', 'calendar', 'active-color');
						}
					}
					@include when(hide) {
						.e-calendar-month__days__day__item__box-text {
							@include VueAndNvueStyleAttr('color', 'calendar', 'hide-color');
						}
					}
					@include when(nowDay) {
						position: relative;
						&::after {
							content: '';
							position: absolute;
							right: -4px;
							top: -4px;
							@include VueAndNvueStyleAttr('background-color', 'calendar', 'active-background-color');
							width: 4px;
							height: 4px;
							border-radius: 100%;
						}
					}
				}
			}
		}
	}
}
